<template>
  <div>
    <el-dialog
      title="新增产品提优"
      :visible.sync="centerDialogVisibleUserAdd"
      :close-on-click-modal="false"
      :before-close="centerDialogVisibleUserAddHidden"
      width="40%"
      center
    >
      <el-form
        ref="ruleFormUserAdd"
        :model="ruleFormUserAdd"
        :rules="rulesUserAdd"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="登记人:" prop="sysProductName">
          <el-input v-model="ruleFormUserAdd.sysProductName" />
        </el-form-item>
        <el-form-item label="图片:" prop="sysProductImg">
          <el-upload
            :on-change="upoloadChange"
            list-type="picture-card"
            action="/api/platform/product/upload/v1"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :http-request = "customUpload"
            name="file"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="详细说明" prop="sysProductDetail">
          <el-input type="textarea" v-model="ruleFormUserAdd.sysProductDetail"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="sysProductType">
          <el-radio-group v-model="ruleFormUserAdd.sysProductType">
            <el-radio label="0">后台权限处理</el-radio>
            <el-radio label="1">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormUserAdd('ruleFormUserAdd')">立即创建</el-button>
          <el-button @click="resetFormUserAdd('ruleFormUserAdd')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Production from '@/api/axios/api/production/production'
import Tip from '@/utils/tip'
import Upload from '@/api/axios/api/common/upload.js'
export default {
  name: 'AuthUserAdd',
  props: {
    userAdd: {}
  },
  data () {
    return {
      centerDialogVisibleUserAdd: false,
      dialogImageUrl: '',
      dialogVisible: false,
      ruleFormUserAdd: {
        sysProductName: '',
        sysProductImg: '',
        sysProductDetail: '',
        sysProductType: '0'
      },
      rulesUserAdd: {
        sysProductName: [
          { required: true, message: '请输入登记人', trigger: 'blur' }
        ],
        sysProductImg: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ],
        sysProductDetail: [
          { required: true, message: '请描述详情', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    userAdd: {
      deep: true,
      immediate: false,
      handler () {
        this.centerDialogVisibleUserAdd = this.userAdd.centerDialogVisibleUserAdd
      }
    }
  },
  methods: {
    handleChange (value) {
    },
    centerDialogVisibleUserAddHidden () {
      this.$emit('centerDialogVisibleUserAdd', false)
    },
    handleRemove (file, fileList) {
      console.log(file)
      console.log(fileList)
      // Upload.delete().then(response => {
      // })
    },
    customUpload (file) {
      // this.generatorFileMd5(file.file)
      // 自定义上传
      Upload.upload(file).then(response => {
        Tip.success(response.data[0].data)
        this.ruleFormUserAdd.sysProductImg = response.data[0].fileName
      })
    },
    upoloadChange (param) {
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitFormUserAdd (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Production.productSave(this.ruleFormUserAdd).then(res => {
            Tip.success(res.data)
            setTimeout(() => {
              this.$emit('centerDialogVisibleUserAdd', false)
            }, 2000)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormUserAdd (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
  .demo-ruleForm .avatar-uploader {
    margin: 10px;
  }
 .demo-ruleForm .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
 .demo-ruleForm .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
